<template>
    <div class="w-full flex justify-center">
        <div class="flex flex-col">
            <div class="flex w-full justify-around border-b py-2">
                <div>字段</div>
                <div>值</div>
            </div>
            <div class="flex w-full justify-around border-b py-2">
                <div>网址：</div>
                <div>
                    <input type="text" name="uri" class="border w-64" v-model.trim="data.uri" />
                </div>
            </div>
            <div class="flex w-full justify-around border-b py-2">
                <div>时间：</div>
                <div>
                    <input type="date" name="uri" class="border w-64" v-model.trim="data.date" />
                </div>
            </div>

            <div class="flex justify-center w-full mt-5">
                <button
                    class="border mx-3 bg-green-500 rounded px-3 py-1 text-white"
                    @click="reset(data)"
                >重置</button>
                <button
                    class="border mx-3 bg-blue-500 rounded px-3 py-1 text-white"
                    @click="upload"
                >提交</button>
            </div>
            <div v-html="data.content"></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reset, getWeChatDoc } from "../utils/utils";
import { reactive } from "vue";
const data = reactive({
    uri: '',
    content: '',
    name: '',
    coverimg: '',
    date: ''
})


const upload = () => {
    const verify = data.uri.match(/^http(s?):\/\/(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})/)
    if (data.uri && verify) {
        console.log(data)
        getWeChatDoc(data.uri, data.date).then(res => {
            data.content = res.content
            data.name = res.name
            data.coverimg = res.coverimg
            data.date = res.date
            console.log(data)
        })

    } else {
        alert('请输入正确的网址')
    }
}

</script>